<template>
  <div class="transaction-detail">
    <div v-if="!transaction" class="empty-state">
      <n-empty description="选择一个请求查看详情" />
    </div>
    
    <div v-else class="detail-content">
      <RequestSection :transaction="transaction" />
      <ResponseSection :transaction="transaction" />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { HttpTransaction } from '../types/index';
import RequestSection from './RequestSection.vue';
import ResponseSection from './ResponseSection.vue';

interface Props {
  transaction?: HttpTransaction;
}

defineProps<Props>();
</script>

<style scoped lang="less">
.transaction-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-color, #ffffff);
  
  .empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
  }
  
  .detail-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    
    .request-section,
    .response-section {
      height: 50%;
      min-height: 0; /* 允许flex子项收缩 */
    }
  }
}
</style> 